<script setup lang="ts">
import { reactive } from 'vue'
interface IMenuItem {
	title: string
	icon?: string
	active: boolean
}

interface IMenu extends IMenuItem {
	children?: IMenuItem[]
}

const menus = reactive<IMenu[]>([
	{
		title: '错误页面',
		icon: 'rightPurpletriangle',
		active: true,
		children: [
			{ title: '404页面', active: true },
			{ title: '403页面', active: false },
			{ title: '500页面', active: false },
		],
	},
	{
		title: '编辑器',
		icon: 'rightPurpletriangle',
		active: false,
		children: [
			{ title: 'markdown', active: false },
			{ title: '富文本', active: false },
		],
	},
])
const handleCollapse = (pmenu: IMenuItem, cmenu?: IMenuItem) => {
	pmenu.active = !pmenu.active
}
</script>

<template>
	<div class="leftMenu">
		<div class="topTitle">
			<i class="rightPurpletriangle"></i>
			<span class="text">后台管理</span>
		</div>
		<div class="menuContent">
			<dl v-for="(menu, index) of menus" :key="index" class="list">
				<dt class="title" @click="handleCollapse(menu)">
					<i :class="menu.icon"></i>
					<span class="text">{{ menu.title }}</span>
				</dt>
				<template v-for="(cmenu, i) of menu.children" :key="i">
					<dd v-show="menu.active" class="content" :class="cmenu.active ? 'active' : ''">{{ cmenu.title }}</dd>
				</template>
			</dl>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.leftMenu {
	border-right: 2px solid pink;
	background-color: #282b39;

	.topTitle {
		display: grid;
		grid-template-columns: 50px 1fr;
		grid-template-rows: 1fr;
		justify-items: center;
		align-items: center;
		height: 80px;

		.text {
			color: azure;
			font-size: 25px;
		}
	}

	.menuContent {
		.list {
			margin-bottom: 20px;
			.active {
				background-color: purple;
			}
			.title {
				display: grid;
				grid-template-columns: 50px 1fr;
				grid-template-rows: 1fr;
				justify-items: center;
				align-items: center;
				height: 30px;
				cursor: pointer;
				color: azure;
			}

			.content {
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				color: azure;
				transition: background-color 0.5s;
				&:hover {
					background-color: purple;
				}
			}
		}
	}
}
</style>
